<template>
  <div class="login">
    <div class="bg">
      <div class="card">
        <div class="title">中古商家管理系统</div>
        <a-form
          :model="formState"
          ref="formRef"
          name="normal_login"
          class="login-form"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item
            name="username"
            :rules="[
              { validator: validatePhone,trigger: 'blur'  }
            ]"
          >
            <a-input
              :bordered="false"
              class="h-form-lebel h-form-input"
              v-model:value="formState.username"
              placeholder="输入11位数登陆手机号"
            >
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            name="code"
            :rules="[{ required: true, message: '请输入验证码!',trigger: 'blur' }]"
          >
            <div class="form-flex">
              <a-input
                :bordered="false"
                class="h-form-lebel h-form-input"
                v-model:value="formState.code"
                placeholder="请输入验证码"
              >
                <template #prefix>
                  <LockOutlined />
                </template>
              </a-input>
              <a-button class="h-form-lebel" type="primary">验证码</a-button>
            </div>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              class="h-form-lebel form-btn"
              @click="handleLogin"
              >登录</a-button
            >
          </a-form-item>
          <a-form-item>
            <div class="flex">
              <a-checkbox v-model:checked="remember">
                同意<a>《商家服务协议》</a>并遵守协议规定
              </a-checkbox>
              <a href="#" @click="handleOpenRegister">注册商家</a>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
  <register :open="open" @closeModal="closeModal" />
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import { LockOutlined, UserOutlined } from "@ant-design/icons-vue";
import register from "./register.vue";
import { message } from "ant-design-vue";
import functions from '@/utils/functions'
const router = useRouter();
const userStore = useUserStore();
const formRef = ref();
const formState = reactive({
  username: "",
  code: ""
});
const remember = ref(true)
const onFinish = (values) => {
  console.log("Success:", values);
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const validatePhone = (rule, value, callback) => {
  if (!value) return Promise.reject('请输入手机号')
  if (!functions.validatePhone(value)) return Promise.reject('请输入正确的手机号')
  return Promise.resolve();
};
const handleLogin = () => {
  formRef.value.validate().then(async (res) => {
    // if(!formState.username) return message.info('请输入手机号')
    // if(!formState.code) return message.info('请输入验证码')
    // if (!functions.validatePhone(formState.username)) return message.info('请输入正确的手机号')
    userStore.Login(formState).then(res => {
      // console.log("Success:", res);
      // console.log(router)
      router.push({ path: "/" });
      message.info('登录成功')
    });
  })
};
const open = ref(false);
const handleOpenRegister = () => {
  open.value = true;
};
const closeModal = () => {
  open.value = false;
}
</script>
<style lang="less" scoped>
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login {
  height: 100vh;
  overflow: hidden;
  .bg {
    background: url("/image/login_bg.jpg") no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .card {
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 48px 88px;
      width: 600px;
      .title {
        font-size: 24px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #262e47;
        margin-bottom: 40px;
        text-align: center;
      }
    }
  }
  .h-form-lebel {
    height: 48px;
  }
  .form-btn {
    width: 100%;
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
  }
  .h-form-input {
    background-color: #f3f5f7;
  }
  .form-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
}
.ant-btn:hover, .ant-btn:focus, .ant-btn:active{
  background-color: #262e47;
}
</style>
